<template>
  <div class="login-page">
    <!-- 加载中 -->
    <mu-container v-if="loading" class="login-page-container">
      <mu-circular-progress class="login-progress" :size="56"></mu-circular-progress>
      <p class="loading-text">加载中，请稍后……</p>
      <p class="app-version">智力方舟出题系统 {{ version.current.text }}</p>
    </mu-container>
    <!-- 强制更新 -->
    <mu-container v-else-if="mustUpdate" class="login-page-container">
      <img src="@/assets/must_update.jpg" alt="" class="must-update-img">
      <mu-alert color="error">
        <mu-icon left value="warning"></mu-icon>您的版本过低，必须更新才能继续使用。
      </mu-alert>
      <p>若无法更新请<a :href="origin">点击这里</a>进入网页版</p>
      <p>最新版本：<mu-badge :content="version.lastest.text" color="success"></mu-badge></p>
      <p>最低版本：<mu-badge :content="version.min.text" color="primary"></mu-badge></p>
      <p>您的版本：<mu-badge :content="version.current.text" color="error"></mu-badge></p>
    </mu-container>
    <!-- 登录页面 -->
    <mu-container v-else class="login-page-container">
      <div class="login-page-title">
        <h1 class="login-title">智力方舟出题系统</h1>
        <p class="app-version">{{ version.current.text }}</p>
      </div>
      <mu-form ref="form" :model="loginForm" class="login-form">
        <mu-form-item label="用户名" help-text="用户名是您的姓名全拼" prop="username" :rules="usernameRules">
          <mu-text-field v-model="loginForm.username" prop="username"></mu-text-field>
        </mu-form-item>
        <mu-form-item label="密码" help-text="初始密码是您的手机号" prop="password" :rules="passwordRules">
          <mu-text-field
            v-model="loginForm.password"
            :action-icon="showPassword ? 'visibility_off' : 'visibility'"
            :action-click="() => (showPassword = !showPassword)"
            :type="showPassword ? 'text' : 'password'"
            prop="password"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item class="d-flex justify-content-center align-items-center">
          <mu-button color="primary" @click="submit">登录</mu-button>
        </mu-form-item>
      </mu-form>
      <!-- 建议更新 -->
      <div v-if="needUpdate">
        <mu-alert color="info">
          <mu-icon left value="warning"></mu-icon>
          <span>系统有新版本：{{ version.lastest.text }}</span>
        </mu-alert>
      </div>
    </mu-container>

    <!-- copyright -->
    <p class="copyright">
      <span>Copyright &copy; 2018-{{ currentYear }} DDLTECH.</span>
      <span>All rights reserved.</span>
      <a href="http://sn.beian.miit.gov.cn" target="_blank">陕ICP备18011800号.</a>
    </p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

// router中needFull为true
export default {
  name: 'LoginPage',
  data() {
    return {
      usernameRules: [
        { validate: (val) => !!val, message: '必须填写用户名' }
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码' }
      ],
      loginForm: {
        username: '',
        password: ''
      },
      showPassword: false,
      currentYear: (new Date()).getFullYear()
    }
  },
  computed: {
    ...mapGetters({
      loading: 'initializing',
      version: 'version'
    }),
    mustUpdate() {
      return this.version.current.code < this.version.min.code
    },
    needUpdate() {
      return this.version.current.code < this.version.lastest.code
    },
    origin() {
      return process.env.VUE_APP_ORIGIN
    }
  },
  methods: {
    ...mapActions({
      login: 'login'
    }),
    submit() {
      this.$refs.form.validate().then(async(result) => {
        if (result) {
          try {
            const user = await this.login(this.loginForm)
            this.$toast.success('欢迎您，' + user.realname + '！')
            this.$router.push('/')
          } catch (err) {
            this.$apiCatch(err)
          }
        }
      })
    },
    clear() {
      this.$refs.form.clear()
      this.loginForm = {
        username: '',
        password: ''
      }
    }
  }
}
</script>

<style scoped>
.login-page {
  width: 100%;
  height: 100%;
}
.login-page-container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.login-progress {
  margin-top: 30px;
}

.login-form {
  margin: 60px 0;
  max-width: 500px;
}

.login-page-title {
  text-align: center;
}
.login-title {
  margin-bottom: 0;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.loading-text {
  margin: 40px 0 8px;
  font-size: 1.15em;
}
.app-version {
  color: #bdbdbd;
  font-size: 0.8em;
}

.must-update-img {
  display: block;
  margin: 20px;
  height: 160px;
  width: 160px;
}

.copyright {
  margin-top: 30px;
  text-align: center;
  font-size: 0.7em;
}
.copyright a {
  color: inherit;
}
</style>
